{extend name="common/block" /}
{block name="style"}
<style>
    .layui-layer-shade{
        background-color:#000000 !important;
        opacity:0.6!important;
    }
</style>
{/block}
{block name="content"}
<div class="layui-btn-container " style="display: inline-block;">
    {volist name="menu_buttons" id="item"}
    {switch $item.action}
    {case create}
    <button class="layui-btn layui-btn-sm j-open"
            j-href="{:url($item.link)}"
            j-title="{$item.name}"
            j-type="2"
            j-config='{"area":["80%","80%"],"anim":2}'
    >
        <i class="layui-icon">{if !empty($item.icon)}{php}echo $item['icon'];{/php}{else/}&#xe624;{/if}</i>{$item.name}
    </button>
    {/case}
    {case delete}
    <button id="btnDeleteChecked" class="layui-btn layui-btn-sm layui-btn-danger" j-href="{:url($item.link)}">
        <i class="layui-icon">{if !empty($item.icon)}{php}echo $item['icon'];{/php}{else/}&#xe640;{/if}</i>{$item.name}
    </button>
    {/case}
    {default /}
    {/switch}
    {/volist}
</div>

{if isset($menu_buttons.search)}
<div class="j-right">
    <input class="layui-input" id="edtSearch" value="" placeholder="输入关键字,菜单名等"
           style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
    <div class="layui-btn-container" style="display: inline-block;">
        <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe615;</i>搜索
        </button>
        <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#x1006;</i>清除搜索
        </button>
    </div>
</div>
{/if}

<script type="text/html" id="opera">
    {volist name="menu_buttons" id="opera"}
        {switch $key}
            {case update}
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">{$opera.name}</a>
            {/case}
            {case delete}
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">{$opera.name}</a>
            {/case}
            {case toAuth}
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="toAuth">{$opera.name}</a>
            {/case}
        {/switch}
    {/volist}
</script>
<table id="table" lay-filter="user"></table>
{/block}

{block name="script"}
<script>
    layui.use(['table', 'layer', 'jquery'], function () {
        var table = layui.table
            , layer = layui.layer
            , $ = layui.jquery;

        table.render({
            elem: '#table',
            url: '{:url("index")}',
            page: true,
            height: 'full-200',
            id:'table',
            method:'post',
            toolbar: true,
            defaultToolbar:['filter', 'exports', 'print'],
            cols: [[ //表头
                {type:'checkbox'}
                , {field: 'id', title: 'ID', width: 80, sort: true}
                , {field: 'account', title: '账号', width: 100}
                , {field: 'nickname', title: '昵称', width: 100}
                , {field: 'avatar', title: '头像',width:60,templet: function(d){
                        if(d.avatar != ''){
                            return '<div><img src="'+d.avatar+'" width="100%" onclick="showImg(this)"/></div>';
                        }else{
                            return '';
                        }
                    }}
                , {field:'mobile',title:'手机号码'}
                , {field:'email',title:'邮箱'}
                , {field:'status',title:'状态',templet:function(d){
                    if(d.status == 1){
                        return '<span class="layui-badge layui-bg-green">启用</span>';
                    }else{
                        return '<span class="layui-badge">禁用</span>';
                    }
                }}
                , {field:'last_login_ip',title:'上次登录ip'}
                , {field:'last_login_time',title:'上次登录时间'}
                , {field:'createtime',title:'创建时间'}
                , {title:'操作' ,templet:'#opera',fixed:'right',width:300}
            ]],
        })


        table.on('tool(user)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定执行删除操作', function(index){
                    layer.close(index);
                    $.get('delete', {id:data.id},function(r){
                        if(r.code == 1){
                            showpopup(r.msg);
                            obj.del();
                        }else{
                            showpopup(r.msg);
                        }
                    },'json')
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    type:2,
                    shadeClose:true,
                    area:['80%','80%'],
                    content:'update?id='+data.id
                })
            }else if(obj.event == 'toAuth'){
                layer.open({
                    type:2,
                    shadeClose:true,
                    area:['50%','80%'],
                    content:'toAuth?id='+data.id
                })
            }
        });
    })
</script>
{/block}
